<div class="announcement-banner">
    <div style="max-width: 960px; margin: 0 auto;">
        🚨 <strong>Update:</strong> EvalAI is transitioning to a paid plan for hosting challenges and is sunsetting
        support for code-upload and static code-upload challenges. If you are planning to host a new challenge, please get in touch at
        <a href="mailto:team@eval.ai" style="color: inherit; text-decoration: underline;">team@eval.ai</a>. 🚨
    </div>
</div>
<div class="main-header padding-lr-header">
    <nav>
        <div class="nav-wrapper">
            <a href="#" data-activates="mobile-demo" class="button-collapse main-header-link"><i class="fa fa-bars"></i></a>
            <ul class="hide-on-med-and-down">
                <li><a class="waves-effect waves-dark main-header-link evalai-logo" ui-sref="home" ui-sref-active="active"><img src="dist/images/evalai-logo-single.png"></a></li>
                <li ng-if="!isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.challenge-main">All Challenges</a></li>
                <li ng-if="!isAuth"><a class="waves-effect waves-dark main-header-link" href="https://evalai.readthedocs.io/en/latest/" target="_blank">Documentation</a></li>
                <!-- show after authenticate user -->
                <li ng-if="isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.dashboard" ui-sref-active="active">Dashboard</a></li>
                <li ng-if="isAuth"><a class="waves-effect waves-dark main-header-link" href="https://evalai.readthedocs.io/en/latest/" target="_blank">Documentation</a></li>
            </ul>
            <ul class="right hide-on-med-and-down">
                <li ng-if="!isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="auth.signup" ui-sref-active="active">Sign Up</a></li>
                <li ng-if="!isAuth"><a class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" ui-sref="auth.login" ui-sref-active="active">Log In</a></li>
                <!-- show after authenticate user -->
                <li ng-if="isAuth">
                    <a ng-click="header.profileDropdown($event)" class="dropdown-button waves-effect waves-dark main-header-link" data-activates='ev-dropdown' ui-sref="web.profile" ui-sref-active="active">Hi <strong>{{header.user.name}}</strong> &nbsp;
                    </a>
                </li>
                <li ng-if="isAuth">
                    <div class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" ng-click="logout()">Logout</div>
                </li>
            </ul>
            <ul class="side-nav" id="mobile-demo">
                <li>
                    <div class="userView">
                        <div class="background">
                            <a class="white-text name">EvalAI</a>
                        </div>
                    </div>
                </li>
                <li><a class="waves-effect waves-dark" ui-sref="home" ui-sref-active="active"><i class="fa fa-home"></i>Home</a></li>
                <li ng-if="!isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.challenge-main"><i class="fa fa-fire"></i>All Challenges</a></li>
                <li ng-if="!isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="auth.signup" ui-sref-active="active"><i class="fa fa-sign-out"></i>Sign Up</a></li>
                <li ng-if="!isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="auth.login" ui-sref-active="active"><i class="fa fa-sign-in"></i>Log In</a></li>
                <!-- show after authenticate user -->
                <li ng-show="isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.dashboard" ui-sref-active="active"><i class="fa fa-thumb-tack"></i>Dashboard</a></li>
                <li ng-show="isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.challenge-main" ui-sref-active="active"><i class="fa fa-fire"></i>All Challenges</a></li>
                <li ng-show="isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.teams" ui-sref-active="active"><i class="fa fa-users"></i>Participant Teams</a></li>
                <li ng-show="isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.challenge-host-teams" ui-sref-active="active"><i class="fa fa-paper-plane"></i>Create Challenge</a></li>
                <li ng-show="isAuth"><a class="waves-effect waves-dark main-header-link" ui-sref="web.profile" ui-sref-active="active"><i class="fa fa-user"></i>Hi {{header.user.name}}!</a></li>                
            </ul>
        </div>
    </nav>
</div>
<div style="
    background-color: #fff3cd;
    color: #856404;
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #ffeeba;
    padding: 12px 16px;
    font-family: Arial, sans-serif;
    margin-top: 64px; /* Adjust this to match your nav height */
    z-index: 999;
">
